<div class="bs-docs-section" ng-controller="TabDemoCtrl">

  <div class="page-header">
    <h1 id="tabs">Tabs <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/tab/tab.js" target="_blank">tab.js</a>
    </h1>
    <code>mgcrea.ngStrap.tab</code>
  </div>


  <h2 id="tabs-examples">Examples</h2>
  <p>Add quick, dynamic tab functionality to transition through panes of local content.</p>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="tab/docs/tab.demo.html" data-content-js-url="tab/docs/tab.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
  <pre class="bs-example-scope">$scope.tabs = {{tabs | json}};</pre>
  <div class="bs-example" append-source>
    <!-- ngModel is optional -->
    <div ng-model="tabs.activeTab" bs-tabs="tabs">
    </div>
  </div>
  <div class="bs-example" style="padding-bottom: 24px;">
    <label>activeTab:</label>
    <strong class="text-danger">{{tabs.activeTab}}</strong>&nbsp;
    <div class="btn-group" ng-model="tabs.activeTab" bs-radio-group>
      <label class="btn btn-default">
        <input type="radio" class="btn btn-default" value="0">First</label>
      <label class="btn btn-default">
        <input type="radio" class="btn btn-default" value="1">Second</label>
      <label class="btn btn-default">
        <input type="radio" class="btn btn-default" value="2">Third</label>
    </div>
  </div>

  <h2 id="tabs-usage">Usage</h2>
  <p>Append a <code>bs-tabs</code>attribute to any element to enable the directive.</p>

  <div class="callout callout-info">
    <h4>Custom animations</h4>
    <p>Pane animation is done with <code>ngClass('active')</code> callbacks and require custom CSS.</p>
    <pre class="bs-exemple-code">
      <code class="css" highlight-block>
        .tabs.am-fade .tab-pane {
          opacity: 1;
          transition: opacity .3s ease;
          min-height:60px;
          &.active-add {
            display: block;
            opacity: 0;
            &.active-add-active {
              opacity: 1;
            }
          }
          &.active-remove {
            display: none;
          }
        }
      </code>
    </pre>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data attributes or as an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object on
    <code>bs-tabs</code>. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 100px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation to the popover with <code>ngAnimate</code></td>
        </tr>
        <tr>
          <td>template</td>
          <td>path</td>
          <td>false</td>
          <td>
            <p>If a remote URL is provided, overrides the default template</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$tabProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($tabProvider) {
            angular.extend($tabProvider.defaults, {
              animation: 'am-flip-x'
            });
          })
        </code>
      </pre>
    </div>
  </div>

</div>
